<template>
  <div class="agentBaseInfo">
    <el-form
      class="m7-form agentBaseInfoForm"
      :rules="agentBaseInfoRules"
      size="mini"
      :model="agentBaseInfoForm"
      ref="agentBaseInfoForm"
      label-position="top"
    >
      <el-form-item label="工号" prop="agentNumber">
        <el-input
          v-model.trim="agentBaseInfoForm.agentNumber"
          :disabled="agentBaseInfoForm._id !== ''"
          placeholder="请输入3-6位数字"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="座席名称" prop="agentName">
        <el-input
          v-model.trim="agentBaseInfoForm.agentName"
          placeholder="请输入座席名称"
          size="mini"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model.trim="agentBaseInfoForm.password"
          :type="passwordType"
          placeholder="密码可由字母、数字、特殊符号组成，长度为8-18个字符"
          autocomplete="new-password"
          size="mini"
        >
          <i
            slot="suffix"
            class="V7_iconfont V7_iconV7tubiao_bukejian"
            v-show="passwordType === 'password'"
            @click="passwordShowFun('text')"
          ></i>
          <i
            slot="suffix"
            class="V7_iconfont V7_iconV7tubiao_kejian"
            v-show="passwordType === 'text'"
            @click="passwordShowFun('password')"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="mobile"
        :rules="
          afterSaleLic ? agentBaseInfoRules.mobile : [{ required: false }]
        "
      >
        <el-input
          v-model.trim="agentBaseInfoForm.mobile"
          placeholder="请输入手机号码"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="!afterSaleLic" label="SIP号" prop="sipNumber">
        <m7Select
          size="mini"
          :clearable="true"
          v-model="agentBaseInfoForm.sipNumber"
          :options="sipNumberList"
          :defaultProps="{ value: 'number', label: 'numberName' }"
          placeholder="请选择"
        >
        </m7Select>
      </el-form-item>
      <el-form-item label="版本" prop="agentVersion">
        <m7Select
          filterable
          size="mini"
          v-model="agentBaseInfoForm.agentVersion"
          :options="editionData"
          :defaultProps="{ value: 'licenceId', label: 'name' }"
          @change="uversionChange"
          placeholder="请选择"
        >
        </m7Select>
      </el-form-item>
      <el-form-item
        label="角色"
        prop="roles"
        v-if="agentBaseInfoForm.agentVersion !== ''"
      >
        <m7Select
          filterable
          size="mini"
          :value="agentBaseInfoForm.roles"
          v-model="agentBaseInfoForm.roles"
          :options="roleData"
          :defaultProps="{ value: '_id', label: 'name' }"
          multiple
          collapse-tags
          placeholder="请选择"
        >
        </m7Select>
      </el-form-item>
      <el-form-item v-if="!afterSaleLic" label="所属技能组" prop="queueList">
        <m7Select
          filterable
          v-model="agentBaseInfoForm.queueList"
          size="mini"
          :options="peerData"
          :defaultProps="{ value: '_id', label: 'name' }"
          multiple
          collapse-tags
          placeholder="请选择"
        >
        </m7Select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model.trim="agentBaseInfoForm.email"
          placeholder="请输入邮箱"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="CRMID" prop="crmId">
        <el-input
          v-model.trim="agentBaseInfoForm.crmId"
          placeholder="请输入CRMID"
          size="mini"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Mixins } from 'vue-property-decorator'
import oprateMixin from '@/mixins/dialogOprate'
import { isNumber2 } from '@/utils/validate'
import { deepClone, regexPass } from '@/utils/common'
import { organizationConfigModule } from '@/store/modules/config/organizationConfig/index'
import { CommonModule } from '@/store/modules/common'
const agentBaseInfoFormTem = { // 基本信息表单
  agentNumber: '', // 工号
  agentName: '', // 座席名字
  password: '', // 密码
  mobile: '', // 手机号码
  agentVersion: '', // 系统版本
  queueList: [], // 技能组
  roles: [], // 角色
  _id: '',
  sipNumber: '', // sip号
  email: '', // 邮箱
  crmId: '' // crmid
}
const validateNumber = (rule: any, value: string, callback: any) => {
  if ((CommonModule as any).session.user.postSaleCloudVersion === 1 && value === '') {
    callback(new Error('请输入手机号码'))
  }
  if (value !== '') {
    if (!isNumber2(value)) {
      callback(new Error('请输入正确的数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
interface ArrayObj {
  props: string
}
@Component({
  name: 'agentBaseInfo'
})
export default class AgentBaseInfo extends Mixins(oprateMixin) {
  @Prop(Array) public editionData!: ArrayObj[] // 版本数据
  @Prop(Array) public allRoleData!: ArrayObj[] // 角色数据
  @Prop(Array) public peerData!: ArrayObj[] // 技能组数据
  @Prop(Array) public sipNumberList!: ArrayObj[] // sip号数据
  private $store: any

  private passwordType = 'password' // 密码类型

  private afterSaleLic: boolean = false

  private validatePass = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请输入密码'))
    } else if (!regexPass(value, this.agentBaseInfoForm.password)) {
      callback(new Error('密码必须大于等于8位，并包含数字，小写字母，大写字母，特殊字符中的至少3种，特殊字符不能是%、&、+、\'、\\"、<、>、='))
    } else {
      callback()
    }
  }

  private validateNumber = (rule, value, callback) => {
    if (value !== '') {
      if (!isNumber2(value) || (value.length < 3 || value.length > 6)) {
        callback(new Error('请输入3-6位数字'))
      } else {
        callback()
      }
    } else {
      callback(new Error('必填'))
    }
  }

  get isAfterSale () {
    return (CommonModule as any).session.user.postSaleCloudVersion === 1
  }

  private agentBaseInfoRules = { // form表单rule
    agentNumber: [{ required: true, validator: this.validateNumber, trigger: 'blur' }],
    agentName: [{ required: true, trigger: 'blur', message: '请输入座席名称' }],
    // password: [{ required: false, trigger: 'blur', validator: this.validatePass }],
    mobile: [{ required: true, validator: validateNumber, trigger: 'blur' }],
    agentVersion: [{ required: true, trigger: 'change', message: '请选择版本' }],
    roles: [{ required: true, trigger: 'change', message: '请选择角色' }],
    queueList: [{ required: true, trigger: 'change', message: '请选择技能组' }]
  }

  private roleData: any = []

  public agentBaseInfoForm = {
    agentNumber: '',
    agentName: '',
    mobile: '',
    password: '',
    agentVersion: '',
    queueList: [],
    roles: [],
    sipNumber: '',
    _id: '',
    email: '', // 邮箱
    crmId: ''
  }

  public setAgentBaseInfoData (data?: any) {
    if (this.isAfterSale) { // 是否为售后云版本
      this.afterSaleLic = true
    }
    if (data) {
      const { agentNumber, agentName, mobile, agentVersion, queueList, roles, email, _id, crmId, sipNumber } = data
      this.uversionChange(agentVersion, () => {
        this.agentBaseInfoForm = {
          _id,
          password: '',
          agentNumber,
          agentName,
          mobile,
          agentVersion,
          queueList,
          roles,
          email,
          crmId,
          sipNumber
        }
      })
    } else {
      this.agentBaseInfoForm = deepClone(agentBaseInfoFormTem)
    }
    this.open()
  }

  private isAfterSaleLic (val: any) {
    const licData: any = this.editionData.filter((item: any) => item.licenceId === val)
    if (licData && licData.length && licData[0].spec) {
      return true
    } else {
      return false
    }
  }

  private uversionChange (val, callback?: any) {
    this.afterSaleLic = false
    if (this.isAfterSaleLic(val)) {
      this.afterSaleLic = true
    }
    this.agentBaseInfoForm.roles = []
    const actionData = { url: '/base/action/role/getByLicenceId/' + val, method: 'GET', data: {} }
    organizationConfigModule.organizationCommonAction(actionData).then(res => {
      this.roleData = res.list
      if (callback) {
        callback()
      }
    })
  }

  private passwordShowFun (type: string) { // 密码是否可见切换事件
    this.passwordType = type
  }

  private mounted () {
    this.roleData = deepClone(this.$store.state.common.publicCache.roleList)
  }
}
</script>
<style lang="stylus" scoped>
.agentBaseInfo
  margin-top 16px
.V7_iconfont
  font-size 15px
  padding-right 6px
  cursor pointer
.passwordType
  border-radius 4px
  margin-left 5px
.passwordType, .passwordType span
  display inline-block
  background #F3F6F9
  color #A4ABB6
  padding 0px 4px
  height 22px
  line-height 26px
</style>
